.pagination_container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  width: 100%;
  padding-bottom: 100px;

  color: var(--color-light-100);

  .pagination_item {
    user-select: none;

    display: flex;
    place-content: center;
    place-items: center;

    min-width: 24px;
    height: 24px;
    margin: 0 6px;

    font-size: 14px;
    text-align: center;

    border-radius: 2px;

    &:hover {
      cursor: pointer;
      color: var(--color-light-100);
      background-color: var(--color-dark-500);
    }
  }
}

.dots {
  min-width: 24px;
  height: 24px;
  margin: 0 6px;
  fill: var(--color-light-100);
}

.arrow {
  transform-origin: center;
  width: 15px;
  height: 24px;
  fill: var(--color-light-100);

  &:hover {
    cursor: pointer;
  }
}

.rotateArrow {
  transform-origin: center;
  transform: rotate(90deg);
}

.selected {
  color: var(--color-dark-900);
  background-color: var(--color-light-100);
}

.disabled {
  pointer-events: none;
  fill: var(--color-dark-100);
}

.selectWrapper {
  display: flex;
  align-items: center;

  width: auto;
  margin-left: 24px;

  font-size: 14px;
  white-space: nowrap;

  & button {
    margin: 0 10px;
  }
}

@media screen and (width <= 620px) {
  .selectWrapper {
    flex-wrap: wrap;
    margin: 20px 0;
  }
}
